<template>
    <div id="index">
        <!-- 切换机具 -->
        <div class="change-equipment">
            <div class="left">
                <span class="name">拉卡拉</span>
                <span class="line"></span>
                <span class="number">00005702880612120309</span>
                <van-icon name="eye" size="0.4rem" />
                <!-- <van-icon size="18" name="closed-eye" v-else /> -->
            </div>
            <div class="left" v-if="false">暂无设备</div>
            <div class="left" v-if="false">机具已申请，请耐心等待发货</div>
            <div class="right" @click="openPopup">切换机具</div>
            <div class="right" v-if="false">申请机器</div>
        </div>
        <!-- 头部 -->
        <div class="header-top">
            <!-- 我的钱包 -->
            <div class="top dis-flex flex-x-between flex-y-center">
                <div class="my-money">
                    <div class="fs-16 fw-500">我的红包(元)</div>
                    <div
                        @click="goWallet"
                        class="number fw-700 fs-34 dis-flex flex-y-center"
                    >
                        <span class="mr-4">{{ userInfo.currentBalance }}</span>
                        <van-icon name="arrow" color="#979797" size="0.4rem" />
                    </div>
                </div>
                <div class="big-goose">
                    <img src="../../../assets/img/Big_Goose.png" alt="" />
                </div>
            </div>
            <!-- 直推统计 -->
            <div class="card">
                <div class="card-title">
                    <div class="title">
                        <img src="" alt="" />
                        <span>直推统计</span>
                    </div>
                    <div class="number">
                        <span>总人数：</span>
                        <span>20</span>
                    </div>
                </div>
                <div class="card-list dis-flex flex-x-between flex-wrap">
                    <div
                        class="card-item dis-flex flex-dir-column flex-y-center"
                        v-for="(item, index) in directThrustList"
                        :key="item.id"
                    >
                        <span class="number">{{ item.num }}</span>
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 团队统计 -->
        <div class="card team">
            <div class="card-title">
                <div class="title">
                    <img src="" alt="" />
                    <span>团队统计</span>
                </div>
            </div>
            <div class="card-list dis-flex flex-x-between flex-wrap">
                <div
                    class="card-item dis-flex flex-dir-column flex-y-center"
                    v-for="(item, index) in teamList"
                    :key="item.id"
                >
                    <img @click="goPage(item)" :src="item.icon" alt="" />
                    <span @click="goPage(item)">{{ item.name }}</span>
                </div>
            </div>
        </div>

        <!-- 切换设备 -->
        <van-popup
            v-model="changePopup"
            :round="true"
            position="bottom"
            :close-on-click-overlay="false"
            @click-overlay="closePopup"
            :style="{ height: '70%' }"
        >
            <div class="popup-content">
                <div
                    class="title dis-flex flex-x-center flex-y-center fs-14 fw-500"
                >
                    <img
                        @click="closePopup"
                        src="../../../assets/img/close1.svg"
                        alt=""
                    />
                    <p>切换设备</p>
                </div>
                <div class="bind-info fs-14 dis-flex flex-x-between">
                    <div>已激活：1台</div>
                    <div @click="applyNew" class="add dis-flex flex-y-center">
                        <img src="../../../assets/img/add.svg" alt="" />
                        <p>申请新设备</p>
                    </div>
                </div>
                <van-loading color="#F53137" v-if="loading" />
                <!-- 列表 -->
                <div
                    v-for="(item, index) in 6"
                    :key="index"
                    @click="changeEqument(item, index)"
                    v-else
                    class="bind-list fs-14 dis-flex flex-x-between flex-y-center"
                >
                    <img
                        class="logo"
                        src="../../../assets/img/active_device.svg"
                        v-if="false"
                        alt=""
                    />
                    <img
                        class="logo"
                        src="../../../assets/img/inactive_device.png"
                        v-else
                        alt=""
                    />
                    <div class="item-info flex-box">
                        <div class="fw-500 dis-flex flex-y-center">
                            <span class="mr-12">{{
                                item.productName
                                    ? item.productName
                                    : "暂无产品名"
                            }}</span>
                            <!-- <span class="common delivered">已发货</span> -->
                            <!-- <span class="common activate">已激活</span> -->
                            <!-- <span class="common get">已领取</span> -->
                            <span class="common receive">已签收</span>
                        </div>
                        <div class="fs-12 fw-400">
                            {{
                                item.machineCoding
                                    ? item.machineCoding
                                    : "11111111111111"
                            }}
                        </div>
                    </div>
                    <div class="trading-btn active" @click="goTrading">
                        交易查询
                    </div>
                    <!-- <div class="trading-btn inactive">交易查询</div> -->
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import { Toast } from 'vant'
    import router from '@/router'
    let Base64 = require('js-base64').Base64;
    export default {
        props: [], // 父辈向子辈传参
        name: 'index',
        components: { // 组件的引用
        },
        data() {
            return {
                userInfo: {
                    currentBalance: '0.00'
                },
                directThrustList: [
                    {
                        id: 1,
                        num: 0,
                        name: '用户人数',
                    },
                    {
                        id: 2,
                        num: 0,
                        name: '激活人数',
                    },
                    {
                        id: 3,
                        num: 0,
                        name: '升团人数',
                    },
                ],
                teamList: [
                    {
                        id: 1,
                        icon: require("../../../assets/img/wallet.png"),
                        name: '人员统计',
                        link: '/team'
                    },
                    {
                        id: 2,
                        icon: require("../../../assets/img/Account_Manager.png"),
                        name: '订单统计',
                        link: '/order'
                    },
                    {
                        id: 3,
                        icon: require("../../../assets/img/complain.png"),
                        name: '交易统计',
                        link: '/tradingDetail'
                    },
                    {
                        id: 4,
                        icon: require("../../../assets/img/About_Us.png"),
                        name: '收益统计',
                        link: '/aboutus'
                    },
                ],
                changePopup: false,
                loading: false
            }
        },
        methods: {
            goWallet() {
                this.$router.push('/wallet')
            },
            openPopup() {
                this.changePopup = true
            },
            closePopup() {
                this.changePopup = false
            },
            applyNew() {

            },
            goTrading() {
                this.$router.push('/trading')
            },
            goPage(item) {
                if (item.link) {
                    this.$router.push(item.link)
                }

            }
        },
        computed: {},
        created() { },
        mounted() {

        },
    }
</script>
    
<style scoped lang='scss'>
    #index {
        // min-height: calc(100vh - 30px);
        font-family: "D-DIN";
    }
    .change-equipment {
        font-weight: 400;
        font-size: 14px;
        color: #f24b3a;
        line-height: 20px;
        width: 375px;
        background: #fff1e8;
        display: flex;
        justify-content: space-between;
        padding: 8px 16px;
        box-sizing: border-box;
        .left {
            display: flex;
            align-items: center;
            .line {
                display: block;
                width: 1px;
                background-color: #f24b3a;
                height: 16px;
                margin: 0px 5px;
            }
            .number {
                margin-right: 6px;
            }
        }
        .right {
            width: 68px;
            height: 24px;
            background: #f24b3a;
            border-radius: 20px 20px 20px 20px;
            font-weight: 400;
            font-size: 13px;
            color: #ffffff;
            line-height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .header-top {
        width: 100%;
        height: 371px;
        background: url("../../../assets/img/Homepage_background.png");
        background-size: 100% 100%;
        position: relative;
        padding: 0 16px;
        box-sizing: border-box;
        .top {
            width: 100%;
            height: fit-content;
            padding-top: 18px;
            .my-money {
                color: #000000;
                line-height: 16px;
                .number {
                    margin-top: 16px;
                    line-height: 34px;
                    font-family: "D-DIN";
                }
            }

            .big-goose {
                font-size: 0;
                & > img {
                    width: 157px;
                    height: 94px;
                }
            }
        }
    }

    .card {
        width: 344px;
        background: #ffffff;
        border-radius: 10px;
        padding: 16px;
        box-sizing: border-box;
        margin: 0 auto;
        .card-title {
            font-weight: 500;
            font-size: 16px;
            color: #121836;
            line-height: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .title {
                & > img {
                    width: 16px;
                    height: 16px;
                    margin-right: 4px;
                }
            }
            .number {
                font-weight: 400;
                font-size: 14px;
                color: #121836;
                line-height: 16px;
                & > span:last-child {
                    color: #f24b3a;
                    font-weight: 500;
                }
            }
        }

        .change-equipment {
            font-weight: 400;
            font-size: 12px;
            color: #0077ff;
            & > img {
                width: 12px;
                height: 12px;
            }
        }
        .equipment-info {
            font-weight: 500;
            font-size: 14px;
            color: #121836;
            line-height: 22px;
            width: 312px;
            height: 80px;
            background: #fafafe;
            padding: 16px 8px;
            margin-top: 16px;
            box-sizing: border-box;
            border-radius: 6px;
            & > img {
                width: 48px;
                height: 48px;
                margin-right: 16px;
            }

            .title {
                & > img {
                    width: 53px;
                    height: 16px;
                    margin-left: 12px;
                }
            }
        }

        .card-list {
            margin-top: 40px;
            .card-item {
                font-weight: 400;
                font-size: 12px;
                color: #333333;
                line-height: 12px;
                width: calc(25% - 10px); /* 计算每个盒子的宽度，考虑间距 */
                & > img {
                    width: 36px;
                    height: 36px;
                    margin-bottom: 10px;
                }

                .number {
                    font-family: D-DIN, D-DIN;
                    font-weight: 700;
                    font-size: 20px;
                    color: #0b1526;
                    line-height: 18px;
                    margin-bottom: 11px;
                }
            }
            .card-item:not(:last-child) {
                margin-bottom: 16px;
            }
        }
    }
    .team {
        margin-top: -97px;
        position: relative;
        z-index: 1;
    }

    .popup-content {
        padding-bottom: 24px;
        .title {
            padding-top: 16px;
            position: relative;
            color: #121836;
            & > img {
                width: 16px;
                height: 16px;
                position: absolute;
                bottom: 0;
                left: 16px;
            }
        }
        .bind-info {
            padding: 40px 16px 18px;
            color: #989898;
            border-bottom: 1px solid #e5e6eb;
            .add {
                color: #0077ff;
                & > img {
                    width: 16px;
                    height: 16px;
                }
            }
        }
        .bind-list {
            border-top: 1px solid #e5e6eb;
            border-bottom: 1px solid #e5e6eb;
            padding: 16px;
            .logo {
                width: 40px;
                height: 40px;
            }
            .item-info {
                margin-left: 8px;
                font-weight: 500;
                font-size: 14px;
                color: #121836;
                line-height: 14px;
                & > div:nth-child(1) {
                    margin-bottom: 16px;
                    display: flex;
                    align-items: center;
                    .common {
                        display: inline-block;
                        width: 38px;
                        padding: 2px 4px;
                        box-sizing: border-box;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 10px;
                        line-height: 14px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 2px 2px 2px 2px;
                    }
                    .delivered {
                        color: #ff7d00;
                        background: #fff7e8;
                    }
                    .activate {
                        color: #00b42a;
                        background: #e8ffea;
                    }
                    .get {
                        color: #165dff;
                        background: #e8f3ff;
                    }
                    .receive {
                        background: #ffece8;
                        color: #f53f3f;
                    }
                }
            }
            .trading-btn {
                width: 68px;
                height: 24px;
                border-radius: 20px 20px 20px 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 400;
                font-size: 13px;
                color: #ffffff;
                line-height: 20px;
            }
            .active {
                background: #f24b3a;
            }
            .inactive {
                background: #999999;
            }
        }
    }
    .van-popup {
        border-radius: 10px 10px 0px 0px;
    }
</style>